<template>
  <div id="info">
    <div class="content" v-for="(item, index) in list" :key="index">
      <div :class="{left : item.tag === 0,left_:item.tag===1}">
        <router-link  :to="{ name: 'DetailsPersonal', params: { id: item.name,name :item.id ,userid:item.userid} }"><img :class="{img : item.tag === 0,img_:item.tag===1}" :src="item.img" alt="" /></router-link>
      </div>
      <div :class="{right : item.tag === 0,right_:item.tag===1}">
        <div :class="{info_name : item.tag === 0,info_name_:item.tag===1}">{{ item.name }}</div>
        <div class="info_content">
          {{ item.content }}
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>
<script>
export default {
  name :"info",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {},
  methods: {}
};
</script>
<style scoped>
#info {
  width: 100%;
  height: 100%;
  position: relative;
    margin-bottom: 70px;
}
.clear {
  clear: both;
}
.content {
  width: 100%;
  height: 100%;
    margin-bottom: 15px;
}
.img {
  height: 35px;
  width: 35px;
}
.img_ {
  height: 35px;
  margin-left: 10px;
  width: 35px;
}
.left_ {
  width: 45px;
  float: right;
}
.right_ {
  float: right;
  display: flex;
  flex-direction: column;
  max-width: 70%;
}
.info_name_ {
  font-size: 10px;
  text-align: right;
}
.left {
  width: 45px;
  float: left;
}
.right {
  float: left;
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.info_name {
  font-size: 10px;
}
.info_content {
  margin-top: 5px;
  background-color: rgb(121, 207, 72);
  padding: 5px 5px 5px 10px;
  font-size: 14px;
}
</style>
